import "game.js" as Game
import Qt 4.7
//import Qt.multimedia 1.0
//import QtMultimediaKit 1.1

Rectangle {
    id: screen
    width: 640; height: 360
    SystemPalette { id: activePalette }

    Item {
        width: parent.width
        anchors { top: parent.top; bottom: toolBar.top }

        Image {
            id: background
            anchors.fill: parent
            // from the following site (only for personal usage):
            // http://mi9.com/wallpaper/kids-painting-designs-the-two-and-the-bubbles_8135/
            source: "bubblekid-640x360.jpg"
            fillMode: Image.PreserveAspectCrop

            MouseArea {
                id: buttonMouseArea
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton
                onClicked: {
                    Game.removeBubble(mouseX,mouseY)
                }
            }
        }
    }

    Timer {
        id: gameTimer
        interval: Game.getUpdateTime()
        repeat: true
        running: false
        triggeredOnStart: false
        onTriggered: Game.onUpdate()
    }

    Dialog {
        id: gameOverDialog
        anchors.centerIn: parent
        z: 100
    }

    Dialog {
        id: aboutDialog
        //textPointSize: 8
        anchors.centerIn: parent
        z: 100
    }

    SpeedDlg {
        id: speedDialog
        anchors.centerIn: parent
        z: 100
        onSpeedSelected: {
            screen.state = "hideSpeedDialog"
            Game.setGameSpeed(speedDialog.selected);
        }
    }

    BubbleDlg {
        id: bubbleDialog
        anchors.centerIn: parent
        z: 100
        onBubblesSelected: {
            screen.state = "hideBubbleDialog"
            Game.setNumBubbles(bubbleDialog.selected);
        }
    }

/*
    Audio {
             id: bubblepop
             source: "bubblepop.wav"
         }
*/
    Rectangle {
        id: toolBar
        width: parent.width
        height: newGameBut.height + 10
        color: activePalette.window
        anchors.bottom: screen.bottom

        Flow {
            id: toolbarFlow
            anchors.verticalCenter: parent.verticalCenter
            spacing: 5

            Button {
                id: newGameBut
                text: " Start "
                onClicked: Game.startNewGame()
            }

            Button {
                id: speedBut
                text: " Speed "
                onClicked: {
                    screen.state = "showSpeedDialog"
                }
            }

            Button {
                id: numBubbles
                text: " Bubbles "
                onClicked: {
                    screen.state = "showBubbleDialog"
                }
            }

            Button {
                id: aboutButt
                text: " About "
                onClicked: Game.aboutGame()
            }

            Button {
                id: quitButt
                text: " Quit "
                onClicked: Game.quitGame()
            }

        }
        Text {
            id: scoreText
            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
            color:"darkturquoise"
            text: ""
        }
    }

    states: [
        State {
            name: "showSpeedDialog";
            PropertyChanges { target: toolBar; opacity:0}
            PropertyChanges { target: speedDialog; opacity:1}
        },
        State {
            name: "hideSpeedDialog";
            PropertyChanges { target: toolBar; opacity:1}
            PropertyChanges { target: speedDialog; opacity:0}
        },
        State {
            name: "showBubbleDialog";
            PropertyChanges { target: toolBar; opacity:0}
            PropertyChanges { target: bubbleDialog; opacity:1}
        },
        State {
            name: "hideBubbleDialog";
            PropertyChanges { target: toolBar; opacity:1}
            PropertyChanges { target: bubbleDialog; opacity:0}
        }
    ]
    transitions: [
        Transition {
            to: "*"
            NumberAnimation {
                properties: "opacity"
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }
    ]
}
